import React, { Component } from "react";
import "./index.css";

export default class List extends Component {
  render() {
    const { userList, isFirst, isLoading ,err } = this.props;
    return (
      <div>
        <ul>
          {
            isFirst ? <h2>欢迎使用！请输入用户名搜索GitHub用户信息</h2> :
            isLoading ? <h2>Loading...........</h2> :
            err ? <h2 style={{color: 'red'}}>{err}</h2> :
            userList.map((item) => {
              return (
                <li key={item.id}>
                  <a href={item.html_url} target="_blank">
                    <img
                      src={item.avatar_url}
                      alt="avatar"
                    />
                  </a>
                  <p title={item.login}>{item.login}</p>
                </li>
              );
            })}
        </ul>
      </div>
    );
  }
}
